import {FileObj} from "@/api/web/FileApi.ts";
import React from "react";
import {FileOutlined, FolderOutlined} from "@ant-design/icons";
import {createStyles} from "antd-style";
import {useFileViewStore} from "@/pages/HomePage/FileDive/FileDiveStore.ts";
import {useNavigate} from "react-router";
import {toDoubleClick} from "@/utils/Util.ts";

const useStyles = createStyles(({css, token}) => {
    const totalHeight = "30px";

    const buttonBase = css`
        display: flex;
        border: none;
        min-width: 100%;
        height: ${totalHeight};
        text-align: left;
        align-items: center;
        font-size: 17px;
        transition: all .2s;
        background-color: transparent;
        text-wrap: nowrap;
        overflow-x: hidden;

        // 文件按钮的文件名

        .button-name {
            padding-left: 5px;
        }
    `

    // 配置加载图形，这个图形在正中间生成
    return {
        fileButton: css`
            ${buttonBase};
            color: ${token.colorText};

            &:hover {
                background-color: ${token.colorPrimary};
            }
        `,
        dirButton: css`
            ${buttonBase};
            color: ${token.colorPrimary};

            &:hover {
                background-color: ${token.colorPrimary};
                color: ${token.colorText};
            }
        `,
        fileListLi: css`
            display: block;
        `,
    }
})

interface FileButtonParam {
    // 文件对象
    fileObj: FileObj
}

/**
 * 文件和文件夹的按钮
 */
const FileButton: React.FC<FileButtonParam> = ({fileObj}) => {
    const styles = useStyles().styles;
    const navigate = useNavigate()
    const setPreviewFile = useFileViewStore(state => state.setPreviewFile);
    const setPreviewDrawerOpen = useFileViewStore(state => state.setPreviewDrawerOpen);

    // 点击文件夹的操作
    const doDirClick = (target: string) => {
        toDoubleClick(doDirDoubleClick, target)
    }

    // 双击文件夹的操作
    const doDirDoubleClick = () => {
        navigate("?path=" + fileObj.path.replace(/[\\/]+/g, '/'))
    }

    // 点击文件的操作
    const doFileClick = () => {
        if (fileObj == null) {
            return
        }
        setPreviewFile(fileObj)
        setPreviewDrawerOpen(true)
    }

    return (
        <li className={styles.fileListLi}>
            {fileObj.dir ?
                <button
                    className={styles.dirButton}
                    onClick={() => doDirClick(fileObj.name)}
                    title={fileObj.name}
                >
                    <FolderOutlined/>
                    <span className="button-name">{fileObj.name}</span>
                </button>
                :
                <button
                    className={styles.fileButton}
                    onClick={doFileClick}
                    title={fileObj.name}
                >
                    <FileOutlined/>
                    <span className="button-name">{fileObj.name}</span>
                </button>
            }
        </li>
    )
}
export default FileButton
